<template>
    <div class="white-box">
        <title-more title="系统设置" />
        <el-tabs v-model="tabName" @tab-click="handleTab">
            <el-tab-pane :label="`${item.label}`" :name="item.scId" v-for="(item,index) in tabarr" :key="index">
                <el-form ref="ruleRef" :model="ruleForm" :rules="ruleCheck" label-width="120px">
                    <el-form-item label="姓名" prop="name" required>
                        <el-input v-model.trim="ruleForm.name" clearable placeholder="请输入平台联系人姓名" />
                    </el-form-item>
                    <el-form-item label="电话" prop="number" required>
                        <el-input
                            v-model.trim="ruleForm.number"
                            oninput="value=value.replace(/[^\d]/g,'')"
                            maxlength="11"
                            clearable
                            placeholder="请输入手机号"
                        />
                    </el-form-item>
                    <el-form-item label="二维码" prop="qr_code" required>
                        <div class="img-box flexs-center" @click.stop="showImg = true" v-if="ruleForm.qr_code == ''">
                            <el-icon color="#999" size="26px">
                                <UploadFilled />
                            </el-icon>
                        </div>
                        <div class="img-selects" v-else>
                            <el-image
                                class="img-selects__pic"
                                :src="proxy.imgUrl + ruleForm.qr_code + '!img_400'"
                                :preview-src-list="srcList"
                                fit="cover"
                            />
                            <div class="img-del" @click.stop="delImg">
                                <el-icon size="14px" color="#fff"><CloseBold /></el-icon>
                            </div>
                        </div>
                    </el-form-item>
                    <el-form-item>
                        <div class="flexs" style="margin-top: 30px">
                            <el-button type="primary" :loading="form_loading" @click="submitForm(ruleRef)">确认</el-button>
                            <el-button @click="resetForm(ruleRef)">重置</el-button>
                        </div>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>

    <!-- 图片库 -->
    <picture-library :show="showImg" :select_multiple="false" @close="showImg = false" @select="selectImg"> </picture-library>

    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref,shallowRef, onMounted, reactive,onBeforeUnmount  } from "vue"
import { UploadFilled, CloseBold } from "@element-plus/icons-vue"
import GoBack from "@components/GoBack.vue"
import TitleMore from "@components/title-more.vue"
import PictureLibrary from "@components/PictureLibrary.vue"
import "@wangeditor/editor/dist/css/style.css"
import {
		Editor,
		Toolbar
	} from "@wangeditor/editor-for-vue"
	
const { proxy } = getCurrentInstance()

onMounted(() => {
    getOne(1)
})

const tabName = ref(1)
const scId=ref(1)
const tabarr = ref([{
			label: "联系客服",
			scId:1
		},
		{
			label: "合作洽谈",
			scId:2
		},
		{
			label: "投诉骑手",
			scId:3
		}
	])
const handleTab = (pane) => {
    tabName.value = pane.index
	var id=tabarr.value[pane.index].scId
	scId.value=id
    getOne(id)
}
//基础信息
function getOne(id) {
	
    proxy.$axios
        .get("admin/service/customer/detail?scId="+id)
        .then((res) => {
            if (res.data.code == 0) {
                let result = res.data.data
                ruleForm.name = result.name
                ruleForm.number = result.number
                ruleForm.qr_code = result.qr_code
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {})
}

/**
 * 基础配置
 * @param {Boolean} form_loading 弹窗按钮状态
 * @property {Array} ruleRef 表单规则
 * @property {Object} ruleForm  表单字段
 * @property {Object} ruleCheck  表单提示
 */
const form_loading = ref(false)
const ruleRef = ref(null)
const ruleForm = reactive({
    name: "",
    number: "",
    qr_code: ""
})
const ruleCheck = reactive({
    name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
    number: [{ required: true, validator: proxy.$util.validPhone, trigger: "blur" }],
    qr_code: [{ required: true, message: "请上传二维码", trigger: "change" }],
})
// 确认
const submitForm = () => {
	if(!ruleForm.name){
		return proxy.$message({message:"请输入姓名",type:"error"})
	}
	if(!ruleForm.number){
		return proxy.$message({message:"请输入手机号码",type:"error"})
	}
	if(!ruleForm.qr_code){
		return proxy.$message({message:"请上传二维码",type:"error"})
	}
    form_loading.value = true
    let data = {
        name: ruleForm.name,
        number: ruleForm.number,
        qr_code: ruleForm.qr_code,
    	scId:scId.value
    }
    proxy.$axios
        .post("admin/service/customer/update", data)
        .then((res) => {
            form_loading.value = false
            if (res.data.code == 0) {
                proxy.$message({ message: "保存成功！", type: "success" })
                getOne(scId.value)
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {
            form_loading.value = false
        })
}
const resetForm = (formEl) => {
    if (!formEl) return
    formEl.resetFields()
}


/**
 * 添加图片
 * @property {Boolean} showImg 显示图片库
 * @property {Function} selectImg 选择图片
 */
const showImg = ref(false)
const srcList = ref([])
const selectImg = (val) => {
    showImg.value = false
    ruleForm.qr_code = val[0].url
    srcList.value.push(proxy.imgUrl + val[0].url)
}
const delImg = () => {
    ruleForm.qr_code = ''
    srcList.value = []

    
}

	
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    
})
</script>
<script>
export default {
    name: "CustomerSetup",
}
</script>

<style lang="less" scoped>
.el-form {
    margin-top: @margin-lg;
}

.contentText{
	color: #8F95A5;
	margin-left: 20px;
}
</style>
